<template>
    <div class="chat-box">
        <div class="messages-container" ref="messagesContainerRef">
            <div v-if="!messages.length" class="empty-content">Welcome to the chat! Please select a session to start
                chatting.</div>
            <div v-else>
                <template v-for="(msg, index) in messages" :key="index">
                    <div v-if="msg.role === 'user'" class="message user-message">
                        <div class="message-box">
                            <!-- <div class="user">{{ msg.user }}</div> -->
                            <div class="message-content">{{ msg.content }}</div>
                        </div>
                    </div>
                    <div v-else-if="msg.role === 'assistant'" class="message assistant-message">
                        <div class="message-box">
                            <div class="assistant-avatar">
                                <KuiIcon name="icon-assistant" size="32px" color="blue" />
                            </div>
                            <div class="message-content">{{ msg.content }}</div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="input-container">
            <el-input type="textarea" v-model="content" placeholder="Type a message..." :autosize="true"
                :clearable="false"></el-input>
            <div style="text-align: right;padding: 10px;">
                <el-button type="primary" size="small" @click="sendMessage">Send</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { streamOutput } from '@/utils/streamOutput';

export default {
    props: {
        applicationId: {
            type: [String, Number],
            required: true
        },
        sessionId: {
            type: [String, Number],
            required: false,
            default: -1, // 新对话
        }
    },
    data() {
        return {
            messages: [],
            content: ''
        };
    },
    watch: {
        sessionId: {
            immediate: true,
            handler(newVal) {
                this.fetchSessionMessages();
            }
        }
    },
    methods: {
        fetchSessionMessages() {
            this.messages = [];
            if (this.sessionId && this.sessionId !== -1) {
                this.$api.ai.getChatSessionMessageList(this.sessionId).then(res => {
                    this.messages = res.data;
                    this.$nextTick(() => {
                        const messagesContainer = this.$refs.messagesContainerRef;
                        messagesContainer.scrollTop = messagesContainer.scrollHeight;
                    });
                });
            }
        },
        async sendMessage() {
            if (this.content.trim()) {
                this.messages.push({ role: 'user', content: this.content });
                this.messages.push({ role: 'assistant', content: '...' });
                // 流式调用大模型
                const body = {
                    content: this.content,
                    username: 'hanliukui',
                    applicationId: this.applicationId,
                    sessionId: this.sessionId
                }
                await streamOutput('/api/ai/chat/stream', body, (content) => {
                    this.messages[this.messages.length - 1].content = content;
                    console.log(content);
                }, () => {
                    console.log('Stream ended');
                });

                this.content = '';
                this.$nextTick(() => {
                    const messagesContainer = this.$refs.messagesContainerRef;
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.chat-box {
    display: flex;
    flex-direction: column;
    // border: 1px solid #eee;
    border-radius: 4px;
    padding: 12px;
    background-color: rgb(236, 245, 255);
    height: 100%;

    .messages-container {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 12px;

        .empty-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .message {
            padding: 10px;

            .message-box {
                .message-content {
                    padding: 10px;
                    border-radius: 12px;
                }
            }

        }

        .user-message {
            display: flex;
            justify-content: right;

            .message-box {

                .message-content {
                    background-color: rgb(198, 226, 255);
                }
            }

        }

        .assistant-message {
            .message-box {
                display: flex;

                .assistant-avatar {
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: aquamarine;
                }

                .message-content {
                    margin-left: 10px;
                    flex: 1;
                    background-color: #ffffff;
                }
            }
        }
    }

    .input-container {
        padding: 0px;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 5px;

        :deep(.el-textarea) {
            box-shadow: unset;

            .el-textarea__inner {
                box-shadow: unset;
            }
        }
    }
}
</style>
